<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的修饰符</title>
</head>

<script src="../js/vue.js"></script>
<body>


<div id="app">

    <p>
        下面的代码会存在事件冒泡的机制，如果不阻止，那么我们单击按钮的时候，
        会同时触发div的单击事件和btn的单击事件，这个是我们不想看到的
    </p>

    <p>
        如果我们想要阻止事件的冒泡，就需要使用v-on的修饰符，来组织冒泡，一般都是
        @click.stop=
    </p>

    <div @click="divClick">
        div的单击事件<br/>
        <button @click.stop="btnClick">btn的单击事件</button>
    </div>


    <p>
        我们还可以采用@click.prevent= 来阻止一些默认事件的提交，比如form表单的提交，我们
        不想让它自动提交，而是跳转到我们的方法执行一些操作以后再提交，那么我们就可以阻止它的
        默认事件
    </p>

    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick"/>
    </form>

    <p>
        我们还可以监听键盘上面的按键，比如监听按下enter键
    </p>

    <input type="text" @keyup.enter="keyDown"/>

</div>

</body>
<script>
    const vue = new Vue({
        'el': '#app',
        'data': {},
        'methods': {
            divClick() {
                console.log('div');
            },
            btnClick() {
                console.log('btn');
            },
            submitClick() {
                console.log('submit');
            },
            keyDown() {
                console.log('keyDown')
            }
        }
    })
</script>

</html>